<template>
  <div>
    <el-dialog v-model="value" title="修改个人信息" width="500px" draggable @open="loadData">
      <el-row>
        <el-col :span="16">
          <el-form :model="data.user" label-width="80px">
            <el-form-item label="手机">
              {{data.user.userTel}}
            </el-form-item>
            
            <el-form-item label="姓名">
              <el-input v-model="data.user.userName" />
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="2"></el-col>
        <el-col :span="5">
          <el-upload
    class="avatar-uploader"
    action="/api/sys/upload/image"
    :headers="{'x-token':store.token}"
    :data="{
        pre: 'head',
        watermark: false,
        maxWidth: 200,
        maxHeight: 200
      }"
    accept="image/*"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
  >
    <img v-if="data.user.userImg" :src="data.user.userImg" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>
        </el-col>
      </el-row>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="value = false">关闭</el-button>
          <el-button type="primary" @click="doit">确认修改</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { computed, reactive, onMounted } from 'vue';
import { userStore } from '../store/user';
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import MyApi from '../api/sys/MyApi';

const data = reactive({});

const store = userStore();

const props = defineProps(["open"]);

const emit = defineEmits(['update:open']);

const value = computed({
  get() {
    return props.open
  },
  set(value) {
    emit('update:open', value)
  }
})

const loadData = ()=>{
  data.user = { ...store.user };//创建全局用户的副本
}

onMounted(loadData);

const doit = () => {
  MyApi.update(data.user).then(r=>{
    if(r.data.ok){
      value.value=false;
      ElMessage.success("修改个人资料成功");
      store.loadUser();
    }
  });
}

const handleAvatarSuccess = (
  r,
  uploadFile
) => {
  console.debug(r);
  // data.user.userImg = URL.createObjectURL(uploadFile.raw!)
  if(r.ok){
    data.user.userImg = r.data;
  }else{
    ElMessage.error(r.message);
  }
}
const beforeAvatarUpload = (rawFile) => {
  if (!rawFile.type.startsWith("image/")) {
    ElMessage.error('请选择图片文件')
    return false
  } else if (rawFile.size / 1024 / 1024 > 5) {
    ElMessage.error('头像文件不能大于5MB!')
    return false
  }
  return true
}
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 100px;
  height: 100px;
  display: block;
  object-fit: cover;
  object-position: center center;
}
.avatar-uploader {
  text-align: right;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  text-align: center;
}
</style>